<template>
    <div class="ww">
        <h1>实时搜索</h1>
        <input v-model="searchValue" placeholder="输入搜索内容" />
        <p>搜索结果: {{ resultMessage }}</p>
        <p>搜索结果数量: {{ resultCount }}</p>
    </div>
</template>

<script setup>
import {ref, watch} from 'vue'

const searchValue = ref('');
const resultCount = ref(0)
const resultMessage = ref()

//假设有一个搜索函数
const searchResults = (term) => {
    //模拟搜索逻辑
    const allItems = ['小狗', '小猫', '大老虎', '大徐坤', '李大大', '王小小'];

    return allItems.filter(item => item.includes(term)) //包含了子字符串的

}

//侦听 searchValue 的变化
watch(searchValue, (newValue) =>{
    resultMessage.value = searchResults(newValue);
    resultCount.value = resultMessage.value.length
})

</script>

<style scoped>
.ww{
    background-color: rgb(172, 172, 201);
    padding: 15px;
}
</style>